<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <!-- 利用事件冒泡机制，将后代元素事件委托给祖先元素  -->
    <ul id="list">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <script>
        var oList = document.getElementById("list");
        var lis = oList.getElementsByTagName("li");

        // 书写循环语句，批量给元素添加监听
        // for (var i of lis) {
        //     i.onclick = function() {
        //         // 在这个函数中，this表示点击这个元素，this涉及函数上下文的相关知识，
        //         this.style.color = 'red'
        //     }
        // };
        //批量添加事件监听会带来性能问题，每一个事件监听都会消耗一定的系统内存，而批量添加事件监听数量太多，内存消耗会非常大
        // 实际上，每个<li>的事件处理函数都是不同的函数，这些函数会消耗一定内存、
        oList.onclick = function(e) {
            // e.target表示用户真正点击的那个（最内层元素）
            e.target.style.color = "red";
        };
        // onmouseenter不冒泡,
    </script>
</body>

</html>